<template>
	<li class="list-wrapper-project" :class="{'with-app': isAll}" >
		<div class="name" @click="open">{{project.title}}</div>
		<div class="app-name">{{project.type | nameMapping}}</div>
		<div class="date">{{project.updatedAt | timeFormat}}</div>
		<div class="project-option">
			<i class="iconfont icon-brush_fill" @click="open"></i>
			<i class="iconfont icon-delete" @click="remove"></i>
		</div>
	</li>
</template>

<script>

	import { format } from '@/utils/date'
	import { appNameMapping } from '@/config/config'

	export default{
		
		name: 'listWrapper',
		
		data () {
			return {

			}
		},

		props: {
	        project: Object,
	        isAll: Boolean,
	        index: Number
	    },
		
		activated () {
	        this.$emit( 'on-view-load' );
	    },

		filters: {
			timeFormat (val) {
				return format(val, 'Y-MM-DD hh:mm');
			},

			nameMapping (val) {
				return appNameMapping[val] ? appNameMapping[val]['name'] : '';
			}
		},
		
		methods: {

			open () {
	        	this.$emit('open', this.project.type, this.project.uid);
			},

			remove () {
				this.$emit('remove', this.project, this.index);
			}
		}

	}
</script>

<style lang="scss">

	@import 'common';
	
	.list-wrapper-project {

		overflow: hidden;
		border-bottom: 1px solid $bdGray;
		height: 50px;
		padding: 8px 0;
		line-height: 32px;
		margin: 0 15px;

		>div {
			float: left;
    		height: 100%;
		}

		>.name {
    		width: 35%;
    		text-align: left;
    		padding: 0 4px;
    		overflow: hidden;
    		@include text-overflow();
    		cursor: pointer;

    		&:hover{
    			color: $primary;
    		}
    	}

    	.app-name {
    		width: 0px;
    		display: none;
    		text-align: right;
    	}

    	>.date {
    		width: 35%;
    		text-align: right;
    	}

    	>.project-option {
    		width: 30%;
    		text-align: center;

    		>i {
    			font-size: 14px;
    			margin-left: 6px;
    			color: $gray;
    			cursor: pointer;
    		}

    		.icon-brush_fill {
    			font-size: 16px;
    		}

    		.icon-brush_fill:hover {
    			color: $info;
    		}

    		.icon-delete:hover {
    			color: $danger;
    		}
    	}

    	&.with-app {
    		.name {
        		width: 30% !important;
        		text-align: left;
        		padding: 0 4px;
        		overflow: hidden;
        		@include text-overflow();
        	}

        	.app-name {
        		width: 25% !important;
        		display: block;
        	}

        	.date {
        		width: 25% !important;
        	}

        	.project-option {
        		width: 20% !important;
        	}
    	}
	}
	
</style>